<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <div th:replace="templates::head_include"></div>

    <!--  map api  -->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="https://cache.amap.com/lbs/static/AMap.PlaceSearchRender1120.css"/>

    <style>
        #panel {
            z-index: 999;
            position: absolute;
            background-color: white;
            max-height: 100%;
            overflow-y: auto;
            right: 0;
            width: 280px;
        }
        .amap-toolbar {
            visibility: hidden !important;
        }
    </style>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=b2ee041341d9db4e5e285e5b52af5547&plugin=AMap.PlaceSearch"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/PlaceSearchRender.js"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

    <title>RMMS</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Additional CSS Files -->
    <link rel="stylesheet" th:href="@{/assets/css/fontawesome.css}">
    <link rel="stylesheet" th:href="@{/assets/css/templatemo-style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/owl.css}">

</head>

<body class="is-preload">

<!-- Wrapper -->
<div id="wrapper">

    <!-- Main -->
    <div id="main">
        <div class="inner">

            <!-- Header -->
            <header id="header">
                <div class="logo">
                    <a th:href="@{/security/mainController}">轻量级城镇道路养护信息管理系统</a>
                </div>
            </header>

            <!-- Banner -->
            <section class="main-banner">
                <div class="container-fluid">
                    <input id="find_name" th:object="${road}" th:value="*{road_name}"/>
                    <div align="center">
                        <div id="container"></div>
                        <div id="panel"></div>
                        <script type="text/javascript">
                            var map = new AMap.Map("container", {
                                resizeEnable: true
                            });
                            var placeSearch = new AMap.PlaceSearch({
                                // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
                                city: '021'
                            })

                            placeSearch.search(document.getElementById('find_name').value, function (status, result) {
                                // 查询成功时，result即对应匹配的POI信息
                                console.log(result)
                                var pois = result.poiList.pois;
                                for(var i = 0; i < pois.length; i++){
                                    var poi = pois[i];
                                    var marker = [];
                                    marker[i] = new AMap.Marker({
                                        position: poi.location,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                                        title: poi.name
                                    });
                                    // 将创建的点标记添加到已有的地图实例：
                                    map.add(marker[i]);
                                }
                                map.setFitView();

                            })

                        </script>
                    </div>
                </div>
            </section>


        </div>
    </div>

    <!-- Sidebar -->
    <div id="sidebar" th:replace="templates::sidebar"></div>

</div>

<div th:replace="templates::tail_include"></div>

</body>


</html>
